<template>
	<view>
		<!-- 通知 -->
		<view v-if="orders.old_orders&&orders.old_orders.length>0">
			<u-notice-bar mode="horizontal" :is-circular="false" :autoplay="false" :volume-icon="false"
				v-if="orders.old_orders.find((item)=>item.generate_type==3)!=undefined"
				:list="['此订单提前还车，请留意']"></u-notice-bar>
			<u-notice-bar mode="horizontal" :is-circular="false" :autoplay="false" :volume-icon="false"
				v-if="orders.old_orders.find((item)=>item.generate_type==4)!=undefined"
				:list="['此订单超时，请留意']"></u-notice-bar>
			<u-notice-bar mode="horizontal" :is-circular="false" :autoplay="false" :volume-icon="false"
				v-if="orders.old_orders.find((item)=>item.generate_type==5)!=undefined"
				:list="['此订单已续租，请留意']"></u-notice-bar>

		</view>
		<!-- 通知 -->
		<view v-if="!orders.custom">
			<u-notice-bar mode="horizontal" :is-circular="false" :autoplay="false" :volume-icon="false"
				:list="['提醒：订单尚未添加客户，请添加客户']"></u-notice-bar>
		</view>
		<view v-if="!orders.orderDriver">
			<u-notice-bar mode="horizontal" :is-circular="false" :autoplay="false" :volume-icon="false"
				@click="toPage('addDriver')" :list="['提醒：该订单未添加驾驶员，请添加驾驶员']"></u-notice-bar>
		</view>
		<!-- 订单号 -->
		<view>
			<u-cell-group>
				<u-cell-item :arrow="false">
					<view slot="title" style="">
						<text v-if="orders.orders_source_id==1">后台录入</text>
						<text v-if="orders.orders_source_id==2">系统商城</text>
						<text v-if="orders.orders_source_id==3">哈罗</text>
						<text v-if="orders.orders_source_id==4">飞猪</text>
						<text v-if="orders.orders_source_id==5">携程</text>
						<text v-if="orders.orders_source_id==6">滴滴打车</text>
						<text v-if="orders.orders_source_id==7">第三方推荐</text>
						<text style="margin-left: 30rpx;">{{orders.orders_num}}</text>
					</view>
					<view slot="right-icon" style="color: #2979ff;" @click="coppy(orders.orders_num)">
						<text>复制</text>
						<u-icon name="file-text"></u-icon>
					</view>
				</u-cell-item>
			</u-cell-group>
		</view>
		<!-- 订单状态 -->
		<view
			style="display: grid;grid-template-columns: repeat(2,1fr);grid-gap: 20rpx;background-color: white;padding: 30rpx;align-items: center;">
			<view>
				<text>订单状态：</text>
				<text v-if="orders.state_id==1">预定</text>
				<text v-if="orders.state_id==2">待出车</text>
				<text v-if="orders.state_id==3">已出车</text>
				<text v-if="orders.state_id==4">已还车</text>
				<text v-if="orders.state_id==5">已结算</text>
				<text v-if="orders.state_id==6">结束</text>
				<text v-if="orders.state_id==7">已取消</text>
			</view>
			<view>
				<text>支付状态：</text>
				<text v-if="orders.orders_pay_status==1">待支付</text>
				<text v-if="orders.orders_pay_status==2">已支付</text>
				<text v-if="orders.orders_pay_status==3">待退还</text>
			</view>
			<view>
				<text>开局发票：</text>
				<text>未知</text>
			</view>
			<view>
				<text>交通违章：</text>
				<text v-if="orders.violationList">{{orders.violationList.length}}条</text>
			</view>


		</view>
		<!-- 租赁信息 -->
		<u-cell-group title="租赁信息">
			<u-cell-item value="取车"
				:label="orders.takeReturn3?orders.takeReturn3.location_address:orders.takeReturn1.location_address"
				:arrow="false">
				<view slot="title">
					<text>{{orders.takeReturn3?orders.takeReturn3.takereturen_date:orders.takeReturn1.takereturen_date}}</text>
					<u-tag style="margin:0 20rpx;" v-if="orders.orders_is_night==2" text="夜间" size="mini" type="warning"
						mode="dark" />
					<u-tag style="margin-left: 20rpx;" v-if="orders.orders_is_night==2" text="急单" size="mini"
						type="error" mode="dark" />
				</view>
			</u-cell-item>
			<u-cell-item :title="orders.return_date" value="还车"
				:label="orders.takeReturn4?orders.takeReturn4.location_name:orders.takeReturn2.location_name"
				:arrow="false"></u-cell-item>
			<u-cell-item title="租赁时长" :value="strDateToTime2(orders.take_date,orders.return_date)"
				:arrow="false"></u-cell-item>
			<u-cell-item title="送车司机" :value="orders.employe_name" :arrow="false"></u-cell-item>
			</u-cell-item>
		</u-cell-group>
		<!-- 客户信息 -->
		<view
			style="padding: 30rpx;padding-bottom: 10rpx;;color: #909399;display: flex;justify-content: space-between;">
			<view>客户信息{{orders.custom?'':'(预约)'}}</view>
			<view style="color: #2979ff;display: flex;align-items: center;" @click="toSelectCustomPage">
				<text>替换/绑定客户</text>
				<u-icon name="plus-people-fill" size="40">
				</u-icon>
			</view>
		</view>
		<u-cell-group>
			<u-cell-item title="客户姓名" :value="orders.custom_name?orders.custom_name:orders.appt_name" :arrow="false">
				<view slot="right-icon">
					<u-tag style="margin-left: 20rpx;" v-if="orders.custom_type==1" text="个人" type="primary"
						mode="light" />
					<u-tag style="margin-left: 20rpx;" v-if="orders.custom_type==2" text="单位" type="warning"
						mode="light" />
				</view>
			</u-cell-item>
			<u-cell-item title="联系电话" :arrow="false">
				<view slot="right-icon" style="color: #2979ff;font-weight: bold;"
					@click="call(orders.custom_tel?orders.custom_tel:orders.appt_tel)">
					<text>{{orders.custom_tel?orders.custom_tel:orders.appt_tel}}</text>
					<u-icon style="margin-left: 10rpx;border: solid  #2979ff 2px;padding: 5rpx;border-radius: 40rpx;"
						name="phone-fill"></u-icon>
				</view>
			</u-cell-item>
			<u-cell-item v-if="orders.custom_type==2" :title="orders.unit_name?orders.unit_name:'[无法显示]'"
				:value="orders.unit_dept_name?orders.unit_dept_name:'[无法显示]'" :arrow="false"></u-cell-item>
		</u-cell-group>
		<!-- 车辆信息 -->
		<u-cell-group title="车辆信息">
			<u-cell-item :title="orders.myType?orders.myType.cx:'[无法显示]'" :arrow="false">
				<view slot="right-icon">
					<u-tag :text="orders.car_num" type="primary" />
				</view>
			</u-cell-item>
			<u-cell-item title="车型信息" :value="orders.car_type_name" :arrow="false"></u-cell-item>
		</u-cell-group>
		<!-- 费用信息 -->
		<view style="padding: 20rpx 30rpx;color: #909399;display: flex;justify-content: space-between;">
			<view>费用明细</view>
			<view style="color: #2979ff;display: flex;align-items: center;" @click="toPage('payRecordList')" >
				<text>交易记录</text>
			</view>
		</view>
		<view style="padding: 20rpx 30rpx;background-color: white;"
			v-if="orders.payItemList!=null||orders.payItemList!=undefined">
			<!-- 循环订单项目 -->
			<view>
				<view style="display: grid;grid-template-columns: 3fr 4fr 2fr 2fr;font-weight: bold;">
					<text style="text-align: left;border: solid #e4e7ed 1px;border-right: none;">名称</text>
					<text style="text-align: center;border: solid #e4e7ed 1px;border-right: none;">用量</text>
					<text style="text-align: center;border: solid #e4e7ed 1px;border-right: none;">单价</text>
					<text style="text-align: right;border: solid #e4e7ed 1px;">总价</text>
				</view>
				<view v-for="item in orders.payItemList">
					<view style="display: grid;grid-template-columns: 3fr 4fr 2fr 2fr;">
						<text style="text-align: left;border: solid #e4e7ed 1px;border-right: none;border-top: none;">{{item.item_name}}</text>
						<text style="text-align: center;border: solid #e4e7ed 1px;border-right: none;border-top: none;">{{item.item_unit}}</text>
						<text style="text-align: center;border: solid #e4e7ed 1px;border-right: none;border-top: none;">{{item.item_single_price}}</text>
						<text style="text-align: right;border: solid #e4e7ed 1px;border-top: none;">{{item.item_total_amount}}</text>
					</view>
				</view>
			</view>
			<view
				style="margin-top: 20rpx;display: grid;grid-template-columns: repeat(2,1fr);grid-row-gap: 20rpx;grid-column-gap: 50rpx;">
				<view style="display: flex;justify-content: space-between;">
					<text>待支付金额：</text>
					<text>{{orders.unpay_amount}}元</text>
				</view>
				<view style="display: flex;justify-content: space-between;">
					<text>订单金额：</text>
					<text>{{orders.total_amount}}元</text>
				</view>
				<view style="display: flex;justify-content: space-between;">
					<text>支付金额：</text>
					<text>{{orders.real_pay_amount}}元</text>
				</view>
				<view style="display: flex;justify-content: space-between;">
					<text>商户收款：</text>
					<text>{{orders.receive_amount}}元</text>
				</view>
				<view style="display: flex;justify-content: space-between;">
					<text>第三方收款：</text>
					<text>{{orders.collection_amount}}元</text>
				</view>
				<view style="display: flex;justify-content: space-between;">
					<text>待退还金额：</text>
					<text>{{orders.expense_amount}}元</text>
				</view>
				<view style="display: flex;justify-content: space-between;">
					<text>退还金额：</text>
					<text>{{orders.back_amount}}元</text>
				</view>

			</view>

			<u-cell-group title="押金信息">
				<u-cell-item :arrow="false" v-for="item in orders.depositPayList"
					v-if="orders.depositPayList&&orders.depositPayList.length">
					<view slot="title">
						<text v-if="item.deposit_pay_type==t.id" v-for="t in [
															{id:1,label:'支付宝授权',value:1},
															{id:2,label:'微信扫码',value:2},
															{id:3,label:'微信转账',value:3},
															{id:4,label:'支付宝扫码',value:4},
															{id:5,label:'支付宝转账',value:5},
															{id:6,label:'信用卡授权',value:6},
															{id:7,label:'银行卡转账',value:7},
															{id:8,label:'现金',value:8},
															{id:9,label:'免缴',value:9},
															{id:10,label:'其他',value:10},
														]">{{t.label}}</text>
					</view>
					<view slot="label">
						<view style="display: flex;justify-content: space-between;width: 450rpx;">
							<view>{{item.employe_name}}</view>
							<view>
								{{$u.timeFormat( item.deposit_pay_datetime,'yyyy-mm-dd hh:MM')}}
							</view>
						</view>


					</view>
					<view slot="right-icon">
						<text style="font-weight: bold;color: #000;">{{item.deposit_pay_amont}}</text>

					</view>
				</u-cell-item>
				<u-cell-item title="未交押金" :arrow="false"></u-cell-item>
			</u-cell-group>
		</view>
		<!-- 验车信息 -->
		<view style="background-color: #fff;" v-if="orders.carValidateList">
			<u-cell-item title="出车验车信息"
				:value="orders.carValidateList.find((item)=>item.validate_object==1)?'已验车':'未验车'" bg-color="#fff"
				@click="carValidatePage(1)"></u-cell-item>
			<u-cell-item title="还车验车信息"
				:value="orders.carValidateList.find((item)=>item.validate_object==2)?'已验车':'未验车'" bg-color="#fff"
				@click="carValidatePage(2)"></u-cell-item>
		</view>
		<!-- 车辆信息 -->
		<u-cell-group title="附件信息" v-if="orders.ordersDocList">
			<u-cell-item title="附件信息" :value="orders.ordersDocList.length+'条'"  @click="toPage('ordersDocList')" :arrow="true"></u-cell-item>
		</u-cell-group>
		<!-- 代驾信息 -->
		<view 
			style="padding: 30rpx;padding-bottom: 10rpx;;color: #909399;display: flex;justify-content: space-between;">
			<view>代驾信息</view>
			<view style="color: #2979ff;display: flex;align-items: center;" @click="toSelectSysValetPage">
				<text>替换/绑定代驾</text>
			</view>
		</view>
		<!-- 代驾信息 -->
		<u-cell-group  >
			<u-cell-item v-if="orders.orderValet" :title="orders.orderValet.valet_name" :value="orders.orderValet.valet_source==1?'内部员工':'外部代驾'"   :arrow="true" @click="toOrderValetList">
				<view slot="label" >
					<view v-if="orders.orderValet.valet_expect_statrtDate!=null" style="display: flex;">
						<view >{{$u.timeFormat(orders.orderValet.valet_expect_statrtDate, 'mm-dd hh:MM')  }}</view>
						<view style="margin: 0 10rpx;">至</view>
						<view v-if="orders.orderValet.valet_expect_endDate">{{$u.timeFormat(orders.orderValet.valet_expect_endDate, 'mm-dd hh:MM')  }}</view>
						<view v-else>现在</view>
						<view style="margin: 0 10rpx;">|</view>
						<view>
							{{strDateToTime2($u.timeFormat(orders.orderValet.valet_expect_statrtDate, 'yyyy-mm-dd hh:MM'),$u.timeFormat(orders.orderValet.valet_expect_endDate||new Date(), 'yyyy-mm-dd hh:MM'))}}
						</view>
					</view>
				</view>
			</u-cell-item>
			<view v-else style="background-color: #F8F8F8;padding: 30rpx;color: #c8c9cc;">无代驾记录</view>
		</u-cell-group>
		<view style="height: 150rpx;"></view>
		<view
			style="position: fixed;bottom: 0;width: 100%; height: 150rpx;background-color: white;padding: 30rpx;box-shadow: -3px -3px 10px #c8c9cc;z-index: 999;">
			<view style="display: flex;justify-content: space-around;">
				<view>
					<u-action-sheet :list="actionSheetList" v-model="showMore"
						@click="clickActionSheet"></u-action-sheet>
					<u-button size="mini" type="primary" @click="showMore=true">
						<text>更多</text>
						<u-icon name="arrow-down"></u-icon>
					</u-button>
				</view>
				<view>
					<u-button size="mini" type="primary" @click="toPage('ordersPayment')">明细</u-button>
				</view>
				<view>
					<u-button size="mini" type="primary" @click="toPage('payAmount')">支付</u-button>
				</view>
				<view v-if="parseFloat(orders.expense_amount).toFixed(2)>0.00">
					<u-button size="mini" type="primary" @click="toPage('backAmount')">退款</u-button>
				</view>
				<view>
					<u-button size="mini" type="primary" @click="toPage('orderDeposit')">押金</u-button>
				</view>
				<view v-if="orders.state_id<3">
					<u-button size="mini" type="primary" @click="toPage('outCar')">出车</u-button>
				</view>
				<view v-if="orders.state_id==3">
					<u-button size="mini" type="primary" @click="toPage('returnCar')">还车</u-button>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<myModal ref="myModal"></myModal>
	</view>
</template>

<script>
	import dateUtils from '../../utils/dateUtils';
	export default {
		data() {
			return {
				permissions: [],
				actionSheetList: [{
					text: '订单备注',
					value: 'ordresRemarks'
				}, {
					text: '添加/修改驾驶员',
					value: 'addDriver'
				}, {
					text: '添加附件',
					value: 'addDoc'
				}],
				orders: '',
				showMore: false
			}
		},
		onLoad(options) {
			if (options.orders_id) {
				this.orders_id=options.orders_id;
				this.getOrderInfo();
				// this.orders = JSON.parse(decodeURIComponent(options.data));
			}
			
		},
		mounted() {
			var that = this;
			uni.$on('getOrdersInfo', function(data) {
				console.log("监听到了，啦啦啦");
				that.getOrderInfo();
			});
		},
		methods: {
			moreBottomPermission(){
				if (uni.getStorageSync('permissions')) {
					console.log("=============");
					console.log(this.orders.state_id);
					console.log(this.permissions.includes('orders:orders:replacecar_returen_orders'));
					console.log("=============");
					this.permissions = JSON.parse(uni.getStorageSync('permissions'));
					if (this.permissions.includes('orders:orders:updateTakeReturn') && this.orders.orders_source_id != 1) {
						this.actionSheetList.push({
							text: '修改取还车信息',
							value: 'updateTakeReturn'
						})
					}
					if (this.permissions.includes('orders:orders:updateLocalTakeReturn') && this.orders.orders_source_id ==
						1) {
						this.actionSheetList.push({
							text: '修改取还车信息',
							value: 'updateTakeReturn'
						})
					}
					if (this.permissions.includes('orders:orders:cancel_returen_orders') || this.orders.state_id < 4 ) {
						this.actionSheetList.push({
							text: '取消订单',
							value: 'cancelOrders'
						})
					}
					if (this.permissions.includes('orders:orders:replacecar_returen_orders') || this.orders.state_id < 4) {
						this.actionSheetList.push({
							text: '换车',
							value: 'replaceCar'
						})
					}
					if (this.permissions.includes('orders:orders:replaceemploye_returen_orders') || this.orders.state_id < 4) {
						this.actionSheetList.push({
							text: '换送车员',
							value: 'replaceEmploye'
						})
					}
				}
			},
			toSelectCustomPage(){
				uni.navigateTo({
					url:'/pages/selectCustom/selectCustom?orders_id='+this.orders.orders_id
				})
			},
			toSelectSysValetPage(){
				uni.navigateTo({
					url:'/pages/selectSysyValet/selectSysyValet?orders_id='+this.orders.orders_id
				})
			},
			toOrderValetList(){
				uni.navigateTo({
					url:'/pages/orderValetList/orderValetList?list='+encodeURIComponent(JSON.stringify(this.orders.orderValetList))
				})
			},
			clickActionSheet(index) {
				var that=this;
				var page = this.actionSheetList[index].value;
				if(page==='cancelOrders'){
					uni.showModal({
						title:'提示',
						content:'确定取消吗？',
						success(res){
							if(res.confirm){
								that.cancelOrders();
							}
						}
					})
					// this.cancelOrders();
					return;
				}
				console.log(page);
				uni.navigateTo({
					url: '/pages/' + page + '/' + page + '?data=' + encodeURIComponent(JSON.stringify(this.orders))
				})
			},
			call(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber: phoneNumber
				})
			},
			strDateToTime2(take_date, return_date) {
				return dateUtils.strDateToTime2(take_date, return_date);
			},
			strDateToTime(take_date, return_date) {
				return dateUtils.strDateToTime(take_date, return_date);
			},
			
			coppy(text) {
				uni.setClipboardData({
					data: text,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 1000
						});
					}
				});
			},
			toPage(e, ord) {
				uni.navigateTo({
					url: '/pages/' + e + '/' + e + '?data=' + encodeURIComponent(JSON.stringify(this.orders))
				})
			},
			carValidatePage(e) {
				var list = this.orders.carValidateList;
				uni.navigateTo({
					url: '/pages/carValidateShow/carValidateShow?list=' + encodeURIComponent(JSON.stringify(
						list)) + '&object=' + e + '&orders_id=' + this.orders.orders_id
				})
			},
			cancelOrders(){
				var that=this;
				console.log(this.orders_id);
				that.$http.get('/orders/cancelOrders?orders_id=' + this.orders_id,{}, (res) => {
					if (res.data.success) {
						that.getOrderInfo();
					} else {
						that.refs.myModal.show('请求失败', res.data.result.message);
					}
				});
			},
			getOrderInfo() {
				var that = this;
				that.$http.get('/orders/queryById?orders_id=' + this.orders_id, {}, (res) => {
					if (res.data.success) {
						that.orders = res.data.result;
						that.moreBottomPermission();
					} else {
						that.$refs.myModal.show('请求失败', res.data.result.message);
					}
				});
			},
			click() {
				console.log("33333");
			}
		}
	}
</script>

<style>

</style>